<template>
	<view class="box">
		<view class="top bg_f5 flex3">
			<navigator url="./city_search?area=true" hover-class="none" class="top_left flex3">
				<view class="font_27 text_bold">{{city_data.city}}</view>
				<image src="../../static/image/index/n@2x.png"></image>
			</navigator>
			<view class="w_flex1">
				<van-field placeholder="输入位置、地标、景点" placeholder-style="color: #acacac" :value="hot_data_.region_name"
					class="font_31" clearable @input="get_search" @clear="get_clear" />
			</view>
			<!-- <input placeholder="输入位置、地标、景点" placeholder-style="color: #ACACAC" class="font_31" />
			<image src="../../static/image/index/b.png"></image> -->
		</view>
		<view class="no_data font_27 color_ac hidden" v-if="is_load && list.length === 0">
			<image src="../../static/image/index/h1.png"></image>
			<view>{{city_data.city}} 暂未开通寄存服务</view>
			<view>点击左上角“<text class="color_ff6a00">城市按钮</text>”可切换其他城市</view>
		</view>
		<view class="content" v-if="is_load && list.length > 0">
			<view class="font_27 color_999 top_title">{{top_title}}</view>
			<view class="block_wrapper flex1" :class="{'active': top_title === '搜索结果'}">
				<view class="block font_31" v-for="item in top_list" :key="item.id" @click="get_map(item)">
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				hot_data_: {},
				top_list: [],
				city_data: {},
				is_load: false,
				top_title: '',
				search_list: [],
				url: './map?type=area',
			}
		},
		onLoad(e) {
			if (e.show) {
				this.url = './map?type=area&show=true'
			}

			if (e.back) {
				this.url = '';
			}
		},
		onShow() {
			this.city_data = uni.getStorageSync('cityData');
			this.hot_data_ = uni.getStorageSync('hotArea');
			this.getHotRegionByRegionId();
		},
		methods: {
			getHotRegionByRegionId() {
				this.$http.get(this.$api.getHotRegionByRegionId, {
					region_id: this.city_data.cityId
				}).then(res => {
					this.is_load = true;

					if (res.data) {
						this.list = res.data;

						this.top_title = '热门地点';
						this.top_list = this.list;
					}
				})
			},
			// 搜索
			get_search(e) {
				if (e.detail) {
					this.$http.post(this.$api.searchHotRegion, {
						region_id: this.city_data.cityId,
						keywords: e.detail
					}).then(res => {
						this.search_list = res.data;

						this.top_title = '搜索结果';
						this.top_list = this.search_list;
					})
				}

				if (!e.detail) {
					this.top_title = '热门地点';
					this.top_list = this.list;
				}
			},
			get_clear() {
				this.top_title = '热门地点';
				this.top_list = this.list;

				uni.removeStorageSync('hotArea');
			},
			// 点击热门地区
			get_map(e) {
				let self = this;
				let hot_data = {
					region_id: e.id,
					region_name: e.name,
					lat: e.lat,
					lng: e.lng
				}
				uni.setStorageSync('hotArea', hot_data);

				if (!this.url) {
					uni.navigateBack();
					return
				}

				uni.redirectTo({
					url: self.url
				});
			}
		}
	}
</script>

<style lang="less">
	.top {
		height: 62rpx;
		width: 704rpx;
		padding: 0 23rpx;
		border-radius: 12rpx;
		box-sizing: border-box;
		margin: 12rpx auto 44rpx;

		image {
			width: 34rpx;
			height: 34rpx;
			margin-right: 10rpx;
		}

		input {
			flex: 1;
		}
	}

	.top_left {
		height: 100%;
		margin-right: 23rpx;
		padding: 0 23rpx;
		border-right: 1px solid #fff;

		image {
			width: 17rpx;
			height: 17rpx;
			margin-left: 4rpx;
			margin-top: 18rpx;
		}
	}

	.top_title {
		margin-bottom: 37rpx;
		padding-left: 38rpx;
	}

	.content {
		overflow-y: auto;
		max-height: calc(100vh - 118rpx);
	}

	.block_wrapper {
		padding: 0 34rpx;
		flex-wrap: wrap;

		&.active {
			display: block;

			.block {
				border: none;
				padding: 0 0 24rpx;
				margin-bottom: 24rpx;
				border-bottom: 1px solid #DDDDDD;
			}
		}
	}

	.block {
		margin: 0 8rpx 15rpx;
		padding: 10rpx 31rpx;
		border-radius: 10rpx;
		border: 1px solid #DDDDDD;
	}

	.no_data {
		text-align: center;

		image {
			width: 500rpx;
			height: 250rpx;
			margin: 200rpx auto 0;
		}

		view {
			margin: 8rpx 0;
		}
	}

	.top /deep/ .van-cell {
		padding: 0;
		background-color: transparent;
	}
</style>
